@extends('template')
@section('css')
    <style>
        .btn-danger{
            position: fixed;
            bottom: 0;
        }
    </style>
@stop
@section('content')
    <header class="m-navbar">
        <a href="{{route('ucenter')}}" class="navbar-item">
            <i class="back-ico"></i>
        </a>
        <div class="navbar-center">
            <span class="navbar-title">注册</span>
        </div>
    </header>

    <div class="g-scrollview">
        <form action="" method="post" id="form">
            <div class="m-cell">
                <div class="cell-item">
                    <div class="cell-left">昵称：</div>
                    <div class="cell-right"><input name="username" id="username" required type="text" maxlength="20" class="cell-input" placeholder="昵称可以是真实姓名" autocomplete="off" /></div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">密码：</div>
                    <div class="cell-right"><input required type="password" class="cell-input passwordone" placeholder="请输入6到12位密码" autocomplete="off" /></div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">重复密码：</div>
                    <div class="cell-right"><input name="password" id="password" required type="password" class="cell-input password" placeholder="请重复输入密码" autocomplete="off" /></div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">QQ：</div>
                    <div class="cell-right"><input name="qq" id="qq" required type="number" class="cell-input" placeholder="请输入QQ号码（QQ号码用于获取头像）" autocomplete="off" /></div>
                </div>
                <button type="submit" class="btn-block btn-danger">注册</button>
            </div>
        </form>
    </div>
@stop
@section('js')
    <script>
        !function (win,$) {
            var dialog = win.YDUI.dialog;
            $('#form').submit(function () {
                var pwdone = $('.passwordone').val(),
                pwd = $('.password').val();
                if (pwdone != pwd){
                    dialog.toast('两次输入密码不一致！', 'error', 1500);
                    return false;
                }
                var reg = /^[A-Za-z0-9]{6,16}$/;
                if (!reg.test(pwd)){
                    dialog.toast('密码必须由 6-16位字母、数字组成！', 'error', 1500);
                    return false;
                }
                if (!/^[0-9]{5,10}$/.test($('#qq').val())){
                    dialog.toast('请输入正确的QQ号码，否则无法获取头像！', 'error', 1500);
                    return false;
                }
                /* ajax发送前显示加载中提示 */
                YDUI.dialog.loading.open('注册账号密码中...');
                $.ajax({
                    type:'post',
                    url:"{{route('signupuser')}}",
                    data:{
                        username:$('#username').val(),
                        qq:$('#qq').val(),
                        password:$('#password').val()
                    },
                    success:function (result) {
                        if (result=='true'){
                            YDUI.dialog.toast('已为您自动登录！', 'success', 1200, function () {
                                /* 关闭后调用 */
                                win.location.href="{{route('ucenter')}}";
                            });
                        }else {
                            dialog.toast('注册失败(不要用已注册过的QQ注册)！', 'error', 200);
                        }
                    },
                    complete: function() {
                        /* 结束后隐藏加载中提示 */
                        YDUI.dialog.loading.close();
                    }
                });
                return false;
            });
        }(window,jQuery);
    </script>
@stop
